<template>
  <li class="newsong" @click="$emit('play-song', thissong[0])">
    <div class="text">
      <h3>{{ item.name }}</h3>
      <div class="msg">
        <span>
          <span class="name" v-for="singer in singers" :key="singer.id">
            {{ singer.name }}
          </span>
        </span>
        <span>{{
          item.song
            ? item.song.album.name
            : item.al
            ? item.al.name
            : item.album.name
        }}</span>
      </div>
    </div>
    <div class="play" v-if="!go"></div>
    <div class="action" v-else>
      <span :class="{ goo: playingStatus }"></span>
      <span :class="{ goo: playingStatus }"></span>
      <span :class="{ goo: playingStatus }"></span>
    </div>
  </li>
</template>

<script>
export default {
  name: "Newsong",
  props: ["item", "playingStatus", "selectedSong"],
  data: function () {
    return {
      thissong: {},
    };
  },
  computed: {
    go() {
      return this.selectedSong == this.item.id ? true : false;
    },
    singers() {
      return this.item.song
        ? this.item.song.artists
        : this.item.ar
        ? this.item.ar
        : this.item.artists;
    },
  },
  created: function () {
    this.axios
      .get(`https://apis.netstart.cn/music/song/detail?ids=${this.item.id}`)
      .then((res) => {
        this.thissong = res.data.songs;
      });
  },
};
</script>

<style lang="less" scoped>
@import "../assets/item.less";
@keyframes action {
  from {
    transform: scaleY(0.2);
  }
  to {
    transform: scaleY(1);
  }
}
.newsong {
  padding: 6px 0;
  margin-left: 10px;
  border-bottom: 1px solid #dfdfdf;
  display: flex;
  justify-content: space-between;

  h3 {
    font-size: 17px;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .msg {
    color: #888888;
    font-size: 12px;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .name {
      &::after {
        content: "/";
      }
      &:last-of-type {
        &::after {
          content: " - ";
        }
      }
    }
  }
  .play {
    width: 22px;
    height: 22px;
    background-image: url("https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=");
    background-repeat: no-repeat;
    background-size: 166px 97px;
    background-position: -24px 0;
    align-self: center;
    margin-right: 10px;
  }
  .action {
    width: 22px;
    height: 20px;
    display: flex;
    align-self: center;
    margin-right: 10px;
    justify-content: space-between;
    span {
      width: 20%;
      height: 100%;
      background-color: @red;
      transform-origin: bottom;
      animation: action 0.6s linear alternate infinite;
      animation-play-state: paused;
      &:nth-child(1) {
        animation-delay: -3s;
      }
      &:nth-child(3) {
        animation-delay: -3s;
      }
      &.goo {
        animation-play-state: running;
      }
    }
  }
}
</style>